<!--
 * @Author: licongwei
 * @Date: 2022-03-15 15:17:47
 * @FileDescription:Cpi
-->
<template>
  <com-box :title="data.title">
    <div class="box">
      <div class="box-radio">
        <el-radio-group
          v-show="data.title != ''"
          v-model="data.radio"
          class="ml-4"
          @change="data.getData()"
        >
          <el-radio label="环比" size="large">环比</el-radio>
          <el-radio label="同比" size="large">同比</el-radio>
        </el-radio-group>
      </div>
      <charts class="line-chart" :params="data.params"></charts>
    </div>
  </com-box>
</template>
<script lang="ts" setup>
import { reactive, defineExpose } from 'vue'
import httpRequest from '@/service'
import * as echarts from 'echarts'
import comBox from '@/components/comBox/comBox.vue'
import { ElRadio, ElRadioGroup } from 'element-plus'
import { getZSDate } from '@/utils/auth'
const refreshData = () => {
  data.getData()
}
defineExpose({
  refreshData
})
const data: any = reactive({
  radio: '环比',
  title: '',
  isGroup: false,
  params: {
    height: '388px',
    loading: true,
    map: {},
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      title: {
        show: true,
        text: '',
        left: '20',
        top: '10',
        textStyle: {
          fontSize: 18,
          fontFamily: 'Microsoft YaHei',
          color: 'rgba(162, 199, 255,1)'
        }
      },
      legend: {
        right: 0,
        top: 15,
        width: '70%'
      },
      // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
      xAxis: [
        {
          axisLabel: {
            fontSize: '14px',
            formatter: function (value: string) {
              const srt = value.split('-')
              return srt[0] + '-' + srt[1]
            }
          }
        }
      ],
      yAxis: [
        {
          name: ['', ''],
          position: ['left', ''],
          splitLine: {
            show: false
          }
        }
      ],
      grid: {
        top: 80,
        bottom: 37
      },
      // backgroundColor: '#082f7e',
      dataZoom: [
        {
          show: false,
          type: 'slider',
          start: 0,
          end: 100,
          width: '80%',
          height: 15,
          left: '10%',
          bottom: '13',
          borderColor: '#166beb',
          handleStyle: {
            color: '#166beb',
            borderColor: '#166beb',
            borderWidth: 4
          },
          moveHandleSize: 10,
          moveHandleStyle: {
            color: '#166beb'
          },
          textStyle: {
            color: '#00c6ff'
          },
          emphasis: {
            handleStyle: {
              color: '#00c6ff',
              borderColor: '#00c6ff',
              borderWidth: 4
            },
            moveHandleStyle: {
              color: '#00c6ff'
            }
          }
        }
      ],
      series: [
        {
          type: ['line', 'line', 'line', 'line', 'line'],
          label: {
            show: false
          },
          symbolSize: 7, //折线点的大小
          smooth: true,
          connectNulls: true,
          itemStyle: {
            color: ['#5dec9d', '#ea68a2', '#1da7ff', '#ec6941', '#ffba0a']
          },
          areaStyle: {
            opacity: 0
          }
          // markPoint: {
          //   label: {
          //     show: true,
          //     color: '#fff'
          //   },
          //   data: [
          //     {
          //       type: 'max'
          //     },
          //     {
          //       type: 'min'
          //     },
          //     {
          //       type: 'average'
          //     }
          //   ]
          // }
        }
      ]
    },
    event: {
      customEvent: (chartInstance: echarts.ECharts) => {
        chartInstance.group = 'group1'
        data.isGroup = true
      }
    }
  },
  getData: () => {
    data.params.loading = true
    const date: any = getZSDate()
    httpRequest
      .get({
        url: 'M5CPILine',
        params: {
          dataType: data.radio,
          startDate: JSON.parse(date)[0],
          endDate: JSON.parse(date)[1]
        }
      })
      .then((res) => {
        if (res.code === 200 && Object.keys(res.map).length > 0) {
          data.params.map = res.map
          data.params.options.yAxis[0].min = res.min || 0
          data.params.options.dataset.dimensions = [
            'name',
            ...Object.keys(res.map)
          ]
          data.params.options.dataset.source = res.data
          if (res.data.length >= 10) {
            data.params.options.dataZoom[0].start = 50
          } else {
            data.params.options.dataZoom[0].start = 0
          }
          data.title = res.title
          data.params.loading = false
          echarts.connect('group1')
        }
      })
      .catch(() => {
        console.log('请求失败')
      })
  }
})
data.getData()
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  padding: 20px;
  padding-top: 0px;
  position: relative;
  &-radio {
    z-index: 10;
    position: absolute;
  }
  &::v-deep(.el-radio) {
    --el-radio-input-bg-color: transparent;
    --el-radio-input-border: 2px solid #194998;
    .el-radio__input.is-checked .el-radio__inner {
      background-color: transparent;
    }
    .el-radio__input.is-checked .el-radio__inner::after {
      // transform: translate(-50%, -50%) scale(1.4);
      background-color: #00ffff;
    }
    .el-radio__inner::after {
      width: 5px;
      height: 5px;
    }
  }
  &::v-deep(.el-radio__label) {
    color: rgb(80, 162, 239);
    font-size: 15px;
  }
}
</style>
